<template>
  <div class="comment-detail">
    <header class="header">
      <van-icon
        @click.stop="$emit('changeShowCommentDetail')"
        name="arrow-left"
      />
      <div>评论</div>
    </header>
    <section class="content">
      <CommentItem
        v-for="(comment, index) in commentsList.slice(0, 5)"
        :key="index"
        :comment="comment"
      />
    </section>
  </div>
</template>

<script>
import CommentItem from "@/components/comment/CommentItem.vue";
export default {
  components: {
    CommentItem,
  },
  props: ["bookId", "commentsList"],
};
</script>

<style lang='scss' scoped>
.comment-detail {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 3000;
  background-color: var(--bgc-white);
  overflow: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .header {
    position: sticky;
    left: 0;
    top: 0;
    background-color: var(--bgc-white);
    z-index: 100;
    display: flex;
    align-items: center;
    font-size: 0.25rem;
    height: 0.5rem;
    box-sizing: border-box;
    padding: 0 0.15rem;
    border-bottom: 0.01rem solid var(--border-gray);
    > div {
      font-size: 0.2rem;
      margin-left: 0.2rem;
    }
  }
  .content{
    width: 100%;
    box-sizing: border-box;
    padding: 0.15rem;
  }
}
</style>